<template>
  <div class="register2">
    <Modal v-model="MX_modal" width="900" :closable="false" :mask-closable="false">
      <p slot="header" style="text-align: center">填写信息</p>
      <div class="content_styl">
        <Spin v-if="spinShow"></Spin>
        <Form ref="tableform" style="max-height: 500px; overflow-y: scroll" :model="formData" label-position="top"
          :rules="ruleValidate">
          <div class="form-styl" style="padding: 0 16px">
            <Row :gutter="24">
              <Col span="8">
              <FormItem label="客户性质" prop="type">
                <Select v-model="formData.type" placeholder="请选择企业属性">
                  <Option value="2">民企非上市</Option>
                  <Option value="3">央企</Option>
                  <Option value="4">民企上市</Option>
                  <Option value="5">地方国企</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="客户类型" prop="memberType">
                <Select v-model="formData.memberType" placeholder="请选择企业属性">
                  <Option value="1">生产型</Option>
                  <Option value="2">贸易型</Option>
                  <Option value="3">终端零售型</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="业务经理" prop="salesmanName">
                <QdSelectSalesman ref="QdSelectSalesman" :salesmanId.sync="formData.salesmanId"
                  :salesmanName.sync="formData.salesmanName" :salesmanCode.sync="formData.salesmanCode">
                </QdSelectSalesman>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="付款方式" prop="payMode">
                <Select v-model="formData.payMode" placeholder="请选择付款方式">
                  <Option value="01">先款后货</Option>
                  <Option value="02">先货后款</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="企业名称" prop="entName">
                <Input v-model="formData.entName" placeholder="请输入企业名称" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="联系人姓名" prop="linkPersonName">
                <Input v-model="formData.linkPersonName" placeholder="请输入联系人姓名" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="联系人电话" prop="linkPersonTel">
                <Input v-model="formData.linkPersonTel" placeholder="请输入联系人电话" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="法人" prop="entLegalPerson">
                <Input v-model="formData.entLegalPerson" placeholder="请输入法人" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="电话号码" prop="phone">
                <Input v-model="formData.phone" placeholder="请输入法人电话号码" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="纳税号" prop="entTaxNumber">
                <Input v-model="formData.entTaxNumber" placeholder="请输入纳税号" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="开户银行" prop="openBank">
                <Input v-model="formData.openBank" placeholder="请输入开户银行" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="银行账号" prop="bankCard">
                <Input v-model="formData.bankCard" placeholder="请输入银行账号" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="银行账户名称" prop="openBankName">
                <Input v-model="formData.openBankName" placeholder="请输入银行账户名称" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="经营范围" prop="entBusinessScope">
                <Input v-model="formData.entBusinessScope" placeholder="请输入经营范围" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="注册时间" prop="registerTime">
                <DatePicker v-model="formData.registerTime" placeholder="注册时间" type="date" format="yyyy-MM-dd" transfer
                  style="width: 100%" @on-change="formData.registerTime = $event"></DatePicker>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="注册资本" prop="registerCapital">
                <Input v-model="formData.registerCapital" placeholder="请输入注册资本">
                <span slot="append">万元</span>
                </Input>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="实缴资本" prop="realCapital">
                <Input v-model="formData.realCapital" placeholder="请输入实缴资本">
                <span slot="append">万元</span>
                </Input>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="是否仓储经营" prop="storageStatus">
                <Select v-model="formData.storageStatus" placeholder="请选择仓储经营">
                  <Option value="0">自有</Option>
                  <Option value="1">租赁</Option>
                  <Option value="2">否</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="12">
              <FormItem label="注册地址" prop="addres">
                <Input v-model="formData.addres" placeholder="请输入注册地址" />
              </FormItem>
              </Col>

              <Col span="12">
              <FormItem label="意向产品" prop="applyBreed">
                <Select v-model="formData.applyBreed" multiple @on-change="selchange($event)">
                  <Option v-for="(item, index) in materialList" :value="item.id" :key="item.id">{{ item.name }}
                  </Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem label="易制毒" prop="poisonStatus">
                <Select v-model="formData.storageStatus" placeholder="请选择易制毒" transfer>
                  <Option value="0">是</Option>
                  <Option value="1">否</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem label="危化企业" prop="dangerousStatus">
                <Select v-model="formData.dangerousStatus" placeholder="请选择危化企业" transfer>
                  <Option value="0">是</Option>
                  <Option value="1">否</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem label="银行卡是否是主账号" prop="bankCardStatus">
                <Select v-model="formData.bankCardStatus" placeholder="请选择是否银行主账号" transfer>
                  <Option value="0">是</Option>
                  <Option value="1">否</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="营业执照" prop="entImgLicense">
                <QdPicUpload :imageList="formData.entImgLicense" @changeval="formData.entImgLicense = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem :label="formData.dangerousStatus == '1'
                  ? '危险化学品许可证'
                  : '安全生产许可证'
                " prop="entImgDangerous">
                <QdPicUpload :imageList="formData.entImgDangerous" @changeval="formData.entImgDangerous = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="银行开户许可证" prop="entImgOpenlicense">
                <QdPicUpload :imageList="formData.entImgOpenlicense" @changeval="formData.entImgOpenlicense = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="委托授权书" prop="entImgLettattmoey">
                <QdPicUpload :imageList="formData.entImgLettattmoey" @changeval="formData.entImgLettattmoey = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="非涉诈告知书" prop="unFraudImg">
                <QdPicUpload :imageList="formData.unFraudImg" @changeval="formData.unFraudImg = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="成品油零售经营许可证" prop="finishoilRetailImg">
                <QdPicUpload :imageList="formData.finishoilRetailImg" @changeval="formData.finishoilRetailImg = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="法人身份证复印件" prop="imgCardJust">
                <QdPicUpload :imageList="formData.imgCardJust" @changeval="formData.imgCardJust = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="委托人身份证复印件" prop="linkPersonCode">
                <QdPicUpload :imageList="formData.linkPersonCode" @changeval="formData.linkPersonCode = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="加油站正面照" prop="refuelStandImg">
                <QdPicUpload :imageList="formData.refuelStandImg" @changeval="formData.refuelStandImg = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="财务报表" prop="financeImg">
                <QdPicUpload :imageList="formData.financeImg" @changeval="formData.financeImg = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8" v-if="formData.poisonStatus == '1'">
              <FormItem label="易制毒证" prop="poisonImg">
                <QdPicUpload :imageList="formData.poisonImg" @changeval="formData.poisonImg = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="其他附件" prop="otherAnnex">
                <QdPicUpload :imageList="formData.otherAnnex" @changeval="formData.otherAnnex = $event"
                  :isOneImage="true" />
              </FormItem>
              </Col>
            </Row>
          </div>
        </Form>
      </div>
      <div slot="footer">
        <Button type="text" @click="MX_modal = false">取消</Button>
        <Button v-if="(store_userInfo.examineStatus != 1 &&
            store_userInfo.examineStatus != 3) ||
          !store_userInfo.entName
          " type="primary" @click="submitFun()">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import QdPicUpload from "@/components/qdPicUpload/index.vue";
import QdSelectSalesman from "@/components/common/QdSelectSalesman.vue";
import { validatePhone } from "@/tool/myValidator";
import { Swicth } from "view-design";
import dayjs from "dayjs";

export default {
  mixins: [],
  components: {
    QdPicUpload,
    QdSelectSalesman,
    Swicth
  },
  data() {
    return {
      formData: {
        applyBreedCopy: [],
        entImgLicense: [],
        entImgLettattmoey: [],
        entImgDangerous: [],
        poisonImg: [],
        entImgOpenlicense: [],
        linkPersonCode: [],
        financeImg: [],
        unFraudImg: [],
        imgCardJust: [],
        finishoilRetailImg: [],
        otherAnnex: [],
        refuelStandImg: []
      },
      managerList: [], //业务经理列表
      materialList: [], //物料列表
      MX_modal: false,
      spinShow: false,
      statusName: {
        0: "已完成",
        1: "初审",
        2: "初审不通过",
        3: "复审",
        4: "复审不通过"
      },
      changqi: false,
      rowdata: {},
      ruleValidate: {
        entName: [
          {
            required: true,
            message: "请输入企业名称",
            type: "string",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择客户性质",
            type: "string",
            trigger: "change"
          }
        ],
        memberType: [
          {
            required: true,
            message: "请选择客户类型",
            type: "string",
            trigger: "change"
          }
        ],
        payMode: [
          {
            required: true,
            message: "请选择付款方式",
            type: "string",
            trigger: "change"
          }
        ],
        entName: [
          {
            required: true,
            message: "请选择企业名称",
            type: "string",
            trigger: "blur"
          }
        ],
        linkPersonName: [
          {
            required: true,
            message: "请选择联系人名称",
            type: "string",
            trigger: "blur"
          }
        ],
        linkPersonTel: [
          {
            required: true,
            message: "请选择联系人电话",
            type: "string",
            trigger: "blur"
          }
        ],
        entLegalPerson: [
          {
            required: true,
            message: "请输入法人",
            type: "string",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入法人电话",
            type: "string",
            trigger: "blur"
          }
        ],
        entTaxNumber: [
          {
            required: true,
            message: "请输入纳税号",
            type: "string",
            trigger: "blur"
          }
        ],
        openBank: [
          {
            required: true,
            message: "请输入开户银行",
            type: "string",
            trigger: "blur"
          }
        ],
        bankCard: [
          {
            required: true,
            message: "请输入银行账号",
            type: "string",
            trigger: "blur"
          }
        ],
        openBankName: [
          {
            required: true,
            message: "请输入银行账号名称",
            type: "string",
            trigger: "blur"
          }
        ],
        entBusinessScope: [
          {
            required: true,
            message: "请输入经营范围",
            type: "string",
            trigger: "blur"
          }
        ],
        registerTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              value ? callback() : callback("请选择注册时间");
            },
            trigger: "change"
          }
        ],
        registerCapital: [
          {
            required: true,
            message: "请输入注册资本",
            // type: "string",
            trigger: "blur"
          }
        ],
        realCapital: [
          {
            required: true,
            message: "请输入实缴资本",
            // type: "number",
            trigger: "blur"
          }
        ],
        addres: [
          {
            required: true,
            message: "请输入注册地址",
            type: "string",
            trigger: "blur"
          }
        ],
        storageStatus: [
          {
            required: true,
            message: "请选择是否仓储经营",
            type: "string",
            trigger: "change"
          }
        ],
        entImgLicense: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传营业执照",
            trigger: "change"
          }
        ],
        entImgDangerous: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传许可证",
            trigger: "change"
          }
        ],
        entImgOpenlicense: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传银行开户许可证",
            trigger: "change"
          }
        ],
        entImgLettattmoey: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传授权委托书",
            trigger: "change"
          }
        ],
        unFraudImg: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传非涉诈告知书",
            trigger: "change"
          }
        ],
        finishoilRetailImg: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传成品油零售经营许可证",
            trigger: "change"
          }
        ],
        imgCardJust: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传法人身份证复印件",
            trigger: "change"
          }
        ],
        linkPersonCode: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传委托人身份证复印件",
            trigger: "change"
          }
        ],
        refuelStandImg: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传加油站正面照",
            trigger: "change"
          }
        ],
        financeImg: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "请上传财务报表",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["store_userInfo"])
  },
  mounted() { },
  methods: {
    ...mapMutations(["changeisRegister"]),
    ...mapActions(["get_userInfo"]),

    openFun(userInfo = {}) {
      this.getManagerList();
      this.getMaterialList();
      console.log("1111111111", userInfo);
      if (userInfo.entName) {
        this.formData = {
          ...userInfo
        };

        if (!this.formData.applyBreed) {
          this.formData.applyBreedCopy = [];
        } else if (this.formData.applyBreed.includes(",")) {
          this.formData.applyBreedCopy = this.formData.applyBreed.split(",");
        } else if (!!this.formData.applyBreed) {
          this.formData.applyBreedCopy = [this.formData.applyBreed];
        }
      }
      this.MX_modal = true;
    },
    // 申请交易品种
    selchange() { },
    // 获取交易品种列表
    getMaterialList() {
      this.httpGet(this.API.API_getProductListUser, {
        // dictTypeCode: 'applyBreed',
        // level: '2'
      })
        .then((res) => {
          this.materialList = res.data;
        })
        .catch((err) => {
          console.error("分类接口报错：", err);
        });
    },
    // 获取业务经理列表
    getManagerList() {
      this.httpGet(this.API.API_sysUser, {
        // companyId: '',
        // positionCodes: ['xsjl', 'xszg']
      })
        .then((res) => {
          this.managerList = res.data;
        })
        .catch((err) => {
          console.error("分类接口报错：", err);
        });
    },
    //储存图片地址
    changeval(val, font) {
      this.formData[font] = val;
      //   console.log("图片的地址", val, font, this.formData);
    },
    // 选择业务经理
    chooseManager(val) {
      this.formData.salesmanName = val.label;
    },
    // 提交注册信息
    submitFun() {
      this.$refs["tableform"].validate((valid) => {
        if (valid) {
          this.spinShow = true;
          let data = {
            ...this.formData,
            id: this.store_userInfo.id,
            realName: this.formData.entName
          };
          data.registerTime = dayjs(this.formData.registerTime).format(
            "YYYY-MM-DD"
          );
          console.log("注册时间", data.registerTime);
          delete data.password;
          // if (this.formData.applyBreedCopy && this.formData.applyBreedCopy.length > 0) {
          //   data.applyBreed = this.formData.applyBreedCopy.join(",");
          // }

          this.httpPost(this.API.API_customerUpdate, data)
            .then((res) => {
              this.spinShow = false;
              this.$Message.success("信息填写成功!");
              this.get_userInfo();
              this.MX_modal = false;
              this.$router.push("/");
            })
            .catch((err) => {
              this.spinShow = false;
              console.error("分类接口报错：", err);
            });
        } else {
          this.spinShow = false;
          this.$Message.error("请输入必填信息");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>@import "~@/assets/styles/main.less";

.ivu-input-number {
  width: 100%;
}

::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back900.png") !important;
}

.content_styl {}</style>
